<template>
	<div class="counter">
		<!-- 减号按钮：绑定禁用状态 + 点击事件 -->
		<button class="cu-btn minus-btn" :class="{ disabled: isMinusDisabled }" @click="handleMinus"
			:disabled="isMinusDisabled">-</button>

		<!-- 数值显示 -->
		<span class="num">{{ currentValue }}</span>

		<!-- 加号按钮：绑定禁用状态 + 点击事件 -->
		<button class="cu-btn plus-btn" :class="{ disabled: isPlusDisabled }" @click="handlePlus"
			:disabled="isPlusDisabled">+</button>
	</div>
</template>

<script>
	export default {
		name: 'ColorUICounter',
		props: {
			// 允许外部传入最大值（默认 100，可根据需求修改）
			max: {
				type: Number,
				default: 100
			},
			value: {
				type: Number,
				default: 1 // 初始值固定为最小值 1
			},
		},
		data() {
			return {
				currentValue: 1
			}
		},

		watch: {
			value: {
				async handler(val) {
					this.currentValue = val
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			// 减号是否禁用（当前值为 1 时禁用）
			isMinusDisabled() {
				return this.currentValue <= 1
			},
			// 加号是否禁用（当前值达到最大值时禁用）
			isPlusDisabled() {
				return this.currentValue >= this.max
			}
		},
		methods: {

			emitInput(value) {
				this.$emit("input", value);
			},


			// 点击减号：仅当当前值 > 1 时递减
			handleMinus() {
				if (this.currentValue > 1) {
					this.currentValue--
					this.emitInput(this.currentValue)
				}
			},
			// 点击加号：仅当当前值 < 最大值时递增
			handlePlus() {
				if (this.currentValue < this.max) {
					this.currentValue++
					this.emitInput(this.currentValue)
				}
			}
		}
	}
</script>

<style scoped>
	/* 计数器容器布局 */
	.counter {
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx 20rpx 0;
		/* 内边距，可根据设计调整 */
	}

	/* 加减按钮通用样式（基于 ColorUI 基础类扩展） */
	.minus-btn,
	.plus-btn {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 40rpx;
		/* margin: 0 10rpx 0rpx 0; */
		transition: all 0.3s ease;
		/* 可选：添加过渡效果 */
	}

	/* 按钮禁用态样式（灰色、半透明） */
	.minus-btn.disabled,
	.plus-btn.disabled {
		background-color: #f5f5f5;
		color: #999;
		cursor: not-allowed;
	}

	/* 按钮可用态样式（ColorUI 橙色主题） */
	.minus-btn:not(.disabled),
	.plus-btn:not(.disabled) {
		background-color: #ff9900;
		color: #fff;
		cursor: pointer;
	}

	/* 数值显示样式 */
	.num {
		font-size: 32rpx;
		min-width: 80rpx;
		text-align: center;
		font-weight: 500;
		/* 可选：加粗数值 */
	}
</style>